<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: xcl
 * @LastEditTime: 2022-11-24 09:53:33
 * @Description: 测试用例
-->
<template>
  <div class="echarts">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
// import CesiumMap from "@/components/map/CesiumMap.vue";
export default {
  name: "CesiumEcharts",
  components: {
    // "cesium-map": CesiumMap,
  },
  data() {
    return {};
  },
  props: {},
  watch: {},
  created() {},
  mounted() {
    // this.init();
    this.init3D();
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      var option = this.returnOption();
      option ? myChart.setOption(option) : "";
    },
    returnOption() {
      let option;

      const __CONFIG_A__ = {
        colorList: ["#F8C96D", "#62E9F5", "#6BD9BC", "#1CBBD2", "#088AD5"], // 前五个扇区的颜色
        labelColor: "#088AD5", // 扇区间引导线颜色
        borderColor: "#fff", // 扇区间隔线颜色
        opacityColor: "2, 51, 153", // 透明起始色
        insideBorderColor: "rgba(250,250,250,0.6)", // 内圆透明边框颜色
      };
      const _original_ = {
        legend: {
          show: false,
          type: "scroll",
          orient: "vertical",
          top: "center",
          right: 20,
          data: [
            {
              code: "ZB001603010117",
              dw: "亿元",
              name: "汽车类",
              value: 1149,
            },
            {
              code: "ZB001603010115",
              dw: "亿元",
              name: "石油及制品类",
              value: 413.4,
            },
            {
              code: "ZB001603010101",
              dw: "亿元",
              name: "粮油食品类",
              value: 297.9,
            },
            {
              code: "ZB001603010104",
              dw: "亿元",
              name: "服装鞋帽、针、纺织品类",
              value: 195.8,
            },
            {
              code: "ZB001603010111",
              dw: "亿元",
              name: "中西药品类",
              value: 162.8,
            },
            {
              code: "ZB001603010110",
              dw: "亿元",
              name: "家用电器和音像器材类",
              value: 145.7,
            },
            {
              code: "ZB001603010103",
              dw: "亿元",
              name: "烟酒类",
              value: 124.7,
            },
            {
              code: "ZB001603010107",
              dw: "亿元",
              name: "日用品类",
              value: 117.2,
            },
            {
              code: "ZB001603010102",
              dw: "亿元",
              name: "饮料类 ",
              value: 68.4,
            },
            {
              code: "ZB001603010112",
              dw: "亿元",
              name: "文化办公用品类",
              value: 52.5,
            },
            {
              code: "ZB001603010114",
              dw: "亿元",
              name: "通讯器材类",
              value: 46.4,
            },
            {
              code: "ZB001603010105",
              dw: "亿元",
              name: "化妆品类",
              value: 44.7,
            },
            {
              code: "ZB001603010106",
              dw: "亿元",
              name: "金银珠宝类",
              value: 40.5,
            },
            {
              code: "ZB001603010116",
              dw: "亿元",
              name: "建筑及装潢材料类",
              value: 31.3,
            },
            {
              code: "ZB001603010113",
              dw: "亿元",
              name: "家具类",
              value: 28.5,
            },
          ],
        },
        borderColor: "#fff",
        opacityColor: "8, 138, 213",
        title: {
          text: "",
          x: "center",
          y: "center",
          textStyle: {},
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            left: 0,
            width: "100%",
            radius: ["25%", "45%"],
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}\n{d}%}",
              rich: {
                a: {
                  align: "left",
                  lineHeight: 20,
                },
              },
            },
            tooltip: {
              show: true,
            },
            labelLine: {
              normal: {
                length: 15,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            itemStyle: {
              borderColor: "rgba(255, 255, 255, 1)",
              borderWidth: 1,
            },
            data: [
              {
                code: "ZB001603010117",
                dw: "亿元",
                name: "汽车类",
                value: 1149,
              },
              {
                code: "ZB001603010115",
                dw: "亿元",
                name: "石油及制品类",
                value: 413.4,
              },
              {
                code: "ZB001603010101",
                dw: "亿元",
                name: "粮油食品类",
                value: 297.9,
              },
              {
                code: "ZB001603010104",
                dw: "亿元",
                name: "服装鞋帽、针、纺织品类",
                value: 195.8,
              },
              {
                code: "ZB001603010111",
                dw: "亿元",
                name: "中西药品类",
                value: 162.8,
              },
              {
                code: "ZB001603010110",
                dw: "亿元",
                name: "家用电器和音像器材类",
                value: 145.7,
              },
              {
                code: "ZB001603010103",
                dw: "亿元",
                name: "烟酒类",
                value: 124.7,
              },
              {
                code: "ZB001603010107",
                dw: "亿元",
                name: "日用品类",
                value: 117.2,
              },
              {
                code: "ZB001603010102",
                dw: "亿元",
                name: "饮料类 ",
                value: 68.4,
              },
              {
                code: "ZB001603010112",
                dw: "亿元",
                name: "文化办公用品类",
                value: 52.5,
              },
              {
                code: "ZB001603010114",
                dw: "亿元",
                name: "通讯器材类",
                value: 46.4,
              },
              {
                code: "ZB001603010105",
                dw: "亿元",
                name: "化妆品类",
                value: 44.7,
              },
              {
                code: "ZB001603010106",
                dw: "亿元",
                name: "金银珠宝类",
                value: 40.5,
              },
              {
                code: "ZB001603010116",
                dw: "亿元",
                name: "建筑及装潢材料类",
                value: 31.3,
              },
              {
                code: "ZB001603010113",
                dw: "亿元",
                name: "家具类",
                value: 28.5,
              },
            ],
          },
          {
            center: ["50%", "50%"],
            left: 0,
            width: "100%",
            radius: ["20%", "35%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            hoverOffset: 0,
            itemStyle: {
              normal: {
                color: "rgba(250,250,250,0.5)",
              },
            },
            data: [
              {
                value: 1,
              },
            ],
          },
        ],
      };
      function getEchartGradientPie(option, apiData, customOption) {
        if (!apiData) return option;

        option.labelLine = { lineStyle: { color: __CONFIG_A__.labelColor } };
        option.label = { color: __CONFIG_A__.labelColor };

        let _series_ = {
          color: __CONFIG_A__.colorList,
          radius: ["25%", "52%"],
          labelLine: { length: 12, length2: 12 },
          itemStyle: { borderColor: __CONFIG_A__.borderColor },
        };

        option.series[0] = Object.assign(option.series[0], _series_);
        option.series[1].itemStyle.normal.color =
          __CONFIG_A__.insideBorderColor;

        // 对条件成立的数据进行处理(从第五个扇区开始渐变，并取消label)
        option.series[0].data = apiData.map((e, index) => {
          if (index > 4) {
            e.itemStyle = e.labelLine = {};

            if (index == 5) {
              e.itemStyle.color = "rgba(" + __CONFIG_A__.opacityColor + ", 1)";
              e.label = e.labelLine = { show: false };
            } else {
              // console.log(( 1 - ( index - 5 ) * 0.12 ));
              e.label = e.labelLine = { show: false };
              e.itemStyle.color =
                "rgba(" +
                __CONFIG_A__.opacityColor +
                ", " +
                (1 - (index - 5) * 0.12) +
                ")";
            }
          }

          return e;
        });

        return option;
      }
      option = {
        legend: {
          show: false,
          type: "scroll",
          orient: "vertical",
          top: "center",
          right: 20,
          data: [
            {
              code: "ZB001603010117",
              dw: "亿元",
              name: "汽车类",
              value: 1149,
            },
            {
              code: "ZB001603010115",
              dw: "亿元",
              name: "石油及制品类",
              value: 413.4,
            },
            {
              code: "ZB001603010101",
              dw: "亿元",
              name: "粮油食品类",
              value: 297.9,
            },
            {
              code: "ZB001603010104",
              dw: "亿元",
              name: "服装鞋帽、针、纺织品类",
              value: 195.8,
            },
            {
              code: "ZB001603010111",
              dw: "亿元",
              name: "中西药品类",
              value: 162.8,
            },
            {
              code: "ZB001603010110",
              dw: "亿元",
              name: "家用电器和音像器材类",
              value: 145.7,
            },
            {
              code: "ZB001603010103",
              dw: "亿元",
              name: "烟酒类",
              value: 124.7,
            },
            {
              code: "ZB001603010107",
              dw: "亿元",
              name: "日用品类",
              value: 117.2,
            },
            {
              code: "ZB001603010102",
              dw: "亿元",
              name: "饮料类 ",
              value: 68.4,
            },
            {
              code: "ZB001603010112",
              dw: "亿元",
              name: "文化办公用品类",
              value: 52.5,
            },
            {
              code: "ZB001603010114",
              dw: "亿元",
              name: "通讯器材类",
              value: 46.4,
            },
            {
              code: "ZB001603010105",
              dw: "亿元",
              name: "化妆品类",
              value: 44.7,
            },
            {
              code: "ZB001603010106",
              dw: "亿元",
              name: "金银珠宝类",
              value: 40.5,
            },
            {
              code: "ZB001603010116",
              dw: "亿元",
              name: "建筑及装潢材料类",
              value: 31.3,
            },
            {
              code: "ZB001603010113",
              dw: "亿元",
              name: "家具类",
              value: 28.5,
            },
          ],
        },
        borderColor: "#fff",
        opacityColor: "8, 138, 213",
        title: {
          text: "",
          x: "center",
          y: "center",
          textStyle: {},
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        series: [
          {
            color: ["#F8C96D", "#62E9F5", "#6BD9BC", "#1CBBD2", "#088AD5"],
            radius: ["25%", "52%"],
            labelLine: {
              length: 12,
              length2: 12,
              normal: {
                length: 15,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            type: "pie",
            center: ["50%", "50%"],
            left: 0,
            width: "100%",
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}\n{d}%}",
              rich: {
                a: {
                  align: "left",
                  lineHeight: 20,
                },
              },
            },
            tooltip: {
              show: true,
            },
            data: [
              {
                code: "ZB001603010117",
                dw: "亿元",
                name: "汽车类",
                value: 1149,
              },
              {
                code: "ZB001603010115",
                dw: "亿元",
                name: "石油及制品类",
                value: 413.4,
              },
              {
                code: "ZB001603010101",
                dw: "亿元",
                name: "粮油食品类",
                value: 297.9,
              },
              {
                code: "ZB001603010104",
                dw: "亿元",
                name: "服装鞋帽、针、纺织品类",
                value: 195.8,
              },
              {
                code: "ZB001603010111",
                dw: "亿元",
                name: "中西药品类",
                value: 162.8,
              },
              {
                code: "ZB001603010110",
                dw: "亿元",
                name: "家用电器和音像器材类",
                value: 145.7,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 1)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010103",
                dw: "亿元",
                name: "烟酒类",
                value: 124.7,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.88)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010107",
                dw: "亿元",
                name: "日用品类",
                value: 117.2,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.76)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010102",
                dw: "亿元",
                name: "饮料类 ",
                value: 68.4,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.64)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010112",
                dw: "亿元",
                name: "文化办公用品类",
                value: 52.5,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.52)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010114",
                dw: "亿元",
                name: "通讯器材类",
                value: 46.4,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.4)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010105",
                dw: "亿元",
                name: "化妆品类",
                value: 44.7,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.28)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010106",
                dw: "亿元",
                name: "金银珠宝类",
                value: 40.5,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.16000000000000003)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010116",
                dw: "亿元",
                name: "建筑及装潢材料类",
                value: 31.3,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, 0.040000000000000036)",
                },
                label: {
                  show: false,
                },
              },
              {
                code: "ZB001603010113",
                dw: "亿元",
                name: "家具类",
                value: 28.5,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: "rgba(2, 51, 153, -0.08000000000000007)",
                },
                label: {
                  show: false,
                },
              },
            ],
          },
          {
            center: ["50%", "50%"],
            left: 0,
            width: "100%",
            radius: ["25%", "35%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            hoverOffset: 0,
            itemStyle: {
              normal: {
                color: "rgba(250,250,250,0.6)",
              },
            },
            data: [
              {
                value: 1,
              },
            ],
          },
        ],
        labelLine: {
          lineStyle: {
            color: "#088AD5",
          },
        },
        label: {
          color: "#088AD5",
        },
      };

      return option;
    },

    init3D() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      var option;
      
      // 全国地图
      var uploadedDataURL = "./static/mapData/FeHelper-20220930165627.json";
      // 四川地图
      // var uploadedDataURL = '/static/mapData/FeHelper-20220930165940.json';
      let valArr = [
        {
          name: "四川省",
          value: 111,
        },
      ];
      $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap("chinamap", geoJson);
        loadMap("chinamap");
      });
      function loadMap(name) {
        option = {
          backgroundColor: "rgba(0,0,0,1)",
          tooltip: {
            show: true,
          },
          // geo3D: {
          //   map: name,
          //   aspectScale: 0.9, //长宽比
          //   zoom: 0.5,
          //   selectedMode: false, //是否允许选中多个区域
          //   label: {
          //     show: false,
          //     color: '#fff',
          //     textStyle: {
          //       color: '#fff',
          //     },
          //     formatter: (params) => {
          //       if (valArr.find((ele) => ele.name == params.name)) {
          //         return params.name + '\n' + valArr.find((ele) => ele.name == params.name).value;
          //       } else {
          //         return params.name;
          //       }
          //     },
          //     backgroundColor: 'rgba(0,0,0,0.5)',
          //     padding: [5, 5],
          //     borderRadius: 4,
          //   },
          //   itemStyle: {
          //     color: 'transparent',
          //     // shadowColor: 'rgba(0,243,255,0.2)',
          //     // shadowOffsetY: 5,
          //     // shadowBlur: 10,
          //     borderColor: 'transparent',
          //     // borderWidth: 1,
          //     opacity: 0,
          //   },
          // },
          series: [
            {
              name: "MAP",
              type: "map3D",
              map: name,
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                formatter: (params) => {
                  if (valArr.find((ele) => ele.name == params.name)) {
                    return (
                      params.name +
                      "\n" +
                      valArr.find((ele) => ele.name == params.name).value
                    );
                  } else {
                    return params.name;
                  }
                },
                borderRadius: 4,
              },
              itemStyle: {
                color: "#144a69",
                // shadowColor: 'rgba(0,243,255,0.2)',
                // shadowOffsetY: 5,
                // shadowBlur: 10,
                borderColor: "#06767c",
                borderWidth: 1,
                // opacity: 1,
              },

              aspectScale: 0.9, //长宽比
              selectedMode: false, //是否允许选中多个区域
              data: valArr,
            },
          ],
        };
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.echarts {
  display: flex;
  align-items: center;
  justify-content: center;
  #main {
    width: 100%;
    height: 800px;
  }
}
</style>
